<template>
  <div class="cesium-viewer-wapper">
    <div id="cesium-viewer" />
    <viewerSettingSidebar :viewerSource="viewerSource" style="top:180px" />
    <div class="tool-box-left-top">
      <!-- <p><button :class="{active}" @click="shortcutAction=!shortcutAction">启用键盘操控</button></p> -->
      <!-- <div class="slider-box-wrapper"><slider-box v-model:value="relativeHeight" :max="10000" /></div> -->
      <!-- <div class="select-box-wrapper"><a-checkbox v-model:checked="shadows">shadows</a-checkbox></div> -->
      <div class="select-box-wrapper"><select-box :options="flyOptions" /></div>
    </div>
    <div class="tool-box-left-bottom"></div>
    <GlobeRotater showTime :viewerSource="viewerSource" />
    <MousePosition show :viewerSource="viewerSource" />
  </div>
</template>

<script>
// https://sandcastle.cesium.com/?src=Camera%20Tutorial.html&label=All
import * as Cesium from '@cesiumjs';
import { defineComponent, ref, watch, toRaw } from 'vue';
import { SelectBox, SliderBar } from '@components/widgets';
// import { G3V } from '@g3x';
import { MousePosition, viewerSettingSidebar, GlobeRotater } from '@g3x/g3v/ui';
import {viewerMixin} from '@mixins';
import merge from "@g3x/utils/merge";

const $g3vOptions = {
  viewers: [{
    viewer: {
      selectionIndicator: true,
      sceneMode: Cesium.SceneMode.SCENE2D,
    },
  }]
};

const flyOptions = {};

export default defineComponent({
  name: 'fly', // 飞行动画
  mixins: [viewerMixin],
  components: { SelectBox, SliderBar, viewerSettingSidebar, GlobeRotater, MousePosition },
  props: {},
  setup() {
    return {};
  },
  data() {
    return {
      flyOptions
    };
  },
  computed: {},
  watch: {},
  methods: {
    g3vOptionsGet(original) {
      const g3vOptions = merge(original, $g3vOptions, true)
      return g3vOptions;
    },
    onViewerInited() {
      console.log('fly onViewerInited');
    },
    initEffects() {
      let vm = this;
      const { viewer } = vm;
      var addData = Cesium.GeoJsonDataSource.load('//zzgis.com/cdn/3d/SampleData/simplestyles.geojson');
      addData.then((dataSource) => {
        viewer.dataSources.add(dataSource).then(()=>{
          viewer.zoomTo(dataSource);
        });
      });
    }
  }
});
</script>

<style lang="less">
.tool-box-left-top {
  display: flex;
  button {
    min-width: 5em;
    background-color: rgba(0, 0, 0, 0.75);
    border-color: rgba(0, 0, 0, 0);
    cursor: pointer;
    transition: all 500ms;
    &:hover {
      opacity: 0.75;
    }
    &.active {
      background-color: rgba(0, 20, 200, 0.75);
    }
  }
}
</style>
